<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            background-color: #f8f8f8;
        }
        .main {
        	margin-top: 6px;
        	margin-bottom: 30px;
        	background-color: #fff;
        }
        .main ul li {
        	border-bottom: 1px solid #e8e8e8;
        }
        .main ul li:last-child {
        	border-bottom: none;
        }
        .main ul li .name_box {
        	height: 50px;
        	line-height: 50px;
        	padding: 0 15px;
			display: -webkit-box;
			display: -webkit-flex;
        }
        .main ul li .name_box .box_l {
        	width: 81px;
        	height: 100%;
        	font-size: 15px;
        	color: #333;
        }
        .main ul li .name_box .box_r {
        	height: 100%;
        	flex: 1;
        	-webkit-flex: 1;
        	box-flex: 1;
        	-webkit-box-flex: 1;
        	display: -webkit-box;
        	display: -webkit-flex;
        }
        .name_box .text_box {
            width: 0;
            height: 100%;
			flex: 1;
			-webkit-flex: 1;
			box-flex: 1;
			-webkit-box-flex: 1;
        }
        .name_box .text_box input {
        	width: 100%;
        	height: 100%;
        	color: #999;
        	font-size: 14px;
            display: block;
        }
        .name_box .text_box input::-webkit-input-placeholder {
        	color: #999;
        }
        .name_box .sex_box {
        	padding-left: 5px;
        }
        .name_box .sex_box span {
			width: 46px;
			height: 25px;
			line-height: 25px;
			display: inline-block;
			color: #fff;
			font-size: 14px;
			text-align: center;
			border-radius: 3px;
        }
        .name_box .sex_box .male {
            border: 1px solid #42c2f7;
            margin-right: 13px;
            color: #42c2f7;
        }
        .name_box .sex_box .male.active {
            background-color: #42c2f7;
            color: #fff;
        }
        .name_box .sex_box .female {
        	border: 1px solid #fe6cb7;
            color: #fe6cb7;
        }
        .name_box .sex_box .female.active {
            background-color: #fe6cb7;
            color: #fff;
        }
        .phone_box {
        	height: 50px;
        	line-height: 50px;
        	padding: 0 15px;
			display: -webkit-box;
			display: -webkit-flex;
        }
        .phone_box .box_l {
        	width: 81px;
        	height: 100%;
        	font-size: 15px;
        	color: #333;
        }
        .phone_box .box_r {
        	height: 100%;
        	flex: 1;
        	-webkit-flex: 1;
        	box-flex: 1;
        	-webkit-box-flex: 1;
        	display: -webkit-box;
        	display: -webkit-flex;
        }
        .phone_box .box_r input {
        	width: 100%;
        	height: 100%;
        	color: #999;
        	font-size: 14px;
        }
        .phone_box .box_r input::-webkit-input-placeholder {
        	color: #999;
        }
        .city_box {
        	height: 50px;
        	line-height: 50px;
        	padding: 0 15px;
			display: -webkit-box;
			display: -webkit-flex;
        }
        .city_box .box_l {
        	width: 81px;
        	height: 100%;
        	font-size: 15px;
        	color: #333;
        }
        .city_box .box_r {
        	height: 100%;
        	flex: 1;
        	-webkit-flex: 1;
        	box-flex: 1;
        	-webkit-box-flex: 1;
        	display: -webkit-box;
        	display: -webkit-flex;
        	align-items: center;
        }
        .city_box .box_r span {
        	flex: 1;
        	-webkit-flex: 1;
        	box-flex: 1;
        	-webkit-box-flex: 1;
        	display: block;
        	color: #999;
        	font-size: 14px;
        }
        .city_box .box_r span p {
            line-height: 14px;
            height: 14px;
            overflow: hidden;
            /*overflow:hidden;text-overflow:ellipsis; white-space: nowrap;*/
        }
        .city_box .box_r span p.addr_name {
        }
        .city_box .box_r span p.addr_detail {
            font-size: 12px;
            margin-top: 4px;
        }
        .city_box .box_r img {
        	height: 13px;
        	padding-left: 5px;
        	display: block;
        }
        .address_box .address_boxt {
        	font-size: 15px;
        	color: #333;
            padding: 13px 15px 2px;
        }
        .address_box .address_boxb textarea {
        	width: 100%;
        	color: #999;
            padding: 15px;
            box-sizing: border-box;
            display: block;
        	font-size: 14px;
        }
        .address_box .address_boxb textarea::-webkit-input-placeholder {
        	color: #999;
        }
        .btn_box {
        	padding: 0 15px;
        }
        .btn_box .btn {
        	width: 100%;
        	height: 40px;
        	line-height: 40px;
        	text-align: center;
        	border-radius: 5px;
        	color: #fff;
        	background-color: #e62442;
        	font-size: 16px;
        }
        input,textarea {
            outline: none;
        }
    </style>
</head>
<body>
    <div class="main">
    	<ul>
    		<li>
    			<div class="name_box">
    				<div class="box_l">联系人</div>
    				<div class="box_r">
    					<div class="text_box">
		    				<input class="username" type="text" placeholder="请输入姓名">
    					</div>
	    				<div class="sex_box">
	    					<span class="male" onclick="fnChoseSex(1,this);" tapmode>先生</span>
	    					<span class="female" onclick="fnChoseSex(2,this);" tapmode>女士</span>
	    				</div>
    				</div>
    			</div>
    		</li>
    		<li>
    			<div class="phone_box">
    				<div class="box_l">电话</div>
    				<div class="box_r">
	    				<input class="tel" type="text" placeholder="手机号码">
    				</div>
    			</div>
    		</li>
    		<li tapmode onclick="fnSelectCity();" tapmode>
    			<div class="city_box">
    				<div class="box_l">城市</div>
    				<div class="box_r">
	    				<span city_id="" class="city_name"></span>
	    				<img src="../image/right.png">
    				</div>
    			</div>
    		</li>
            <li tapmode onclick="fnSelectAddress();" tapmode>
                <div class="city_box">
                    <div class="box_l">选择地址</div>
                    <div class="box_r">
                        <span  class="chose_address">
                            <p class="addr_name"></p>
                            <p class="addr_detail"></p>
                        </span>
                        <img src="../image/right.png">
                    </div>
                </div>
            </li>
    		<li>
    			<div class="address_box">
	    			<div class="address_boxt">详细地址</div>
	    			<div class="address_boxb">
		    			<textarea class="addr_door" placeholder="请补充详细门牌号"></textarea>
	    			</div>
    			</div>
    		</li>
    	</ul>
    </div>
    <div class="btn_box">
	    <div class="btn" onclick="fnSubmit();" tapmode>完成</div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
    apiready = function(){
        address_id = api.pageParam.address_id || '';
        sex = 0;
        city_id = '';
        city_name = '';
        is_default = 0;
        addr_name = '';
        addr_detail = '';
        lng = '';
        lat = '';
        user = $api.getStorage('user_data');
        if(address_id) {
            fnGetAddress();
        }
        api.addEventListener({
            name: 'choseCityEvent'
        }, function(ret, err) {
            if (ret) {
                city_id = ret.value.city_id;
                city_name = ret.value.city_name;
                $('.city_name').text(city_name);
                $('.city_name').attr("city_id",city_id);
            }
        });

        api.addEventListener({
            name: 'setPointEvent'
        }, function(ret, err) {
            if (ret) {
                lng = ret.value.lng;
                lat = ret.value.lat;
                addr_name = ret.value.name;
                addr_detail = ret.value.addr;
                $('.addr_name').text(addr_name);
                $('.addr_detail').text(addr_detail);
            }
        });
        //如果新增，就读取所在城市
        if(!address_id) {
            fnGetCity();
        }
    };

    //获取现在城市
    function fnGetCity() {
        var GoogleMap = api.require('googleMap');
        GoogleMap.getLocation(function(ret) {
            if (ret.status) {
                lat = ret.lat;
                lng = ret.lon;
                GoogleMap.getNameFromCoords({
                    lon: lng,
                    lat: lat
                }, function(ret, err) {
                    if (ret.status) {
                        $('.city_name').text(ret.city);
                        city_name = ret.city;
                    }else {
                        api.toast({
                            msg: err.msg,
                            location : 'middle'
                        });
                    }
                });
            }
        });
    }

    // 选择城市
    function fnSelectCity() {
        api.openWin({
            name: 'select_city',
            url: 'select_city.html'
        });
    }

    function fnSubmit() {
        user = $api.getStorage('user_data');
        var username = $('.username').val();
        var tel = $('.tel').val();
        var address_detail = $('.address_detail').val();
        if(!username) {
            api.toast({
                msg: '请输入姓名',
                location:'middle'
            });
            return;
        }
        if(!tel) {
            api.toast({
                msg: '请输入电话号码',
                location:'middle'
            });
            return;
        }
        if(!city_name) {
            api.toast({
                msg: '请选择城市',
                location:'middle'
            });
            return;
        }
        if(!addr_name) {
            api.toast({
                msg: '请先选择地址',
                location:'middle'
            });
            return;
        }
        openLoading();
        api.ajax({
            url: rootPath+'/api/user/edit_address',
            method: 'post',
            data: {
                values: { 
                    uid: user.id,
                    token:user.token,
                    username:$('.username').val(),
                    tel:$('.tel').val(),
                    area_id2:city_id,
                    area_name2:city_name,
                    sex:sex,
                    address_id : address_id,
                    is_default : is_default,
                    lng : lng,
                    lat : lat,
                    addr_name : addr_name,
                    addr_door : $('.addr_door').val(),
                    addr_detail:addr_detail,
                },

            }
        }, function(ret, err) {
            if (ret) {
                if(ret.status == 200) {
                    api.toast({
                        msg: '操作成功',
                    });
                    api.sendEvent({
                        name: 'changeAddressList',
                        extra: {
                        }
                    });
                    setTimeout(function(){
                        api.closeWin();
                    },1000)
                }
            } else {
                api.toast({
                    msg: err.msg,
                    location : 'middle'
                });
            }
            closeLoading();
        });
    }

    function fnChoseSex(sex_value,this_) {
        $('.sex_box span').removeClass('active');
        $(this_).addClass('active');
        sex=sex_value;
    }

    function fnGetAddress() {
        api.ajax({
            url: rootPath+'/api/user/get_address_detail',
            method: 'get',
            data: {
                values: { 
                    address_id: address_id,
                    uid:user.id,
                    token:user.token
                },
   
            }
        }, function(ret, err) {
            if (ret) {
                $('.username').val(ret.data.username);
                $('.tel').val(ret.data.tel);
                if(ret.data.sex == 1) {
                    sex = 1;
                    $('.male').addClass('active');
                }else if(ret.data.sex == 2) {
                    sex = 2;
                    $('.female').addClass('active');
                }
                city_id = ret.data.area_id2;
                city_name = ret.data.area_name2;
                $('.city_name').text(ret.data.area_name2);
                $('.city_name').attr('city_id',ret.data.city_id);
                $('.address_detail').val(ret.data.address_detail);
                is_default = ret.data.is_default;
                lat = ret.data.lat;
                lng = ret.data.lng;
                addr_name = ret.data.addr_name;
                addr_detail = ret.data.addr_detail;
                addr_door = ret.data.addr_door;
                $('.addr_name').text(addr_name);
                $('.addr_detail').text(addr_detail);
                $('.addr_door').val(addr_door);
            } else {
                
            }
        });
    }

    function fnSelectAddress() {
        api.openWin({
            name: 'chose_address',
            url: './chose_address.html',
            pageParam: {
                city_name : city_name,
            }
        });
    }
</script>
</html>